<template>
	<view>
		<!-- 头部状态栏 -->
		<!-- <view class="status" :style="{'height': this.$store.state.statusHight + 'px' }">
		</view> -->
		<!-- 游记内容 -->
		<view class="attentionItem flex flexBei" v-for="(item, index) in collectionList" :key="index">
			<view class="attentionItem_content flex" @click.prevent="navScennic(item.scenic_id, item.scenic_name)">
				<image :src="item.scenic_picture1" ></image>
				<view class="attentionItem_info">
					<view class="attentionItem_title">
						{{item.scenic_name}}
					</view>
					<view class="attentionItem_instoduction textHd">
						{{item.scenic_content}}
					</view>
				</view>
			</view>
			<u-button class="btn" @click.stop="showModel(item.scenic_id)" type="error" size="medium">取消收藏</u-button>
		</view>
		<!-- 为空 -->
			<u-empty mode="list" text="暂未收藏景点" v-show="this.collectionList.length == 0" margin-top="160">
			</u-empty>
			<!-- 语句提示 -->
			<u-toast ref="uToast"></u-toast>
			<!-- 弹出层 -->
			<u-modal v-model="show"  show-cancel-button @confirm="deleteCollection">
						<view class="slot-content" style="font-size: 28rpx;padding: 0 24rpx;line-height: 72rpx;">
							你将会取消对该景点的收藏，是否继续?
						</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {collectdeletescenic, collectgetscenic} from '../../api/scenic.js'
	export default {
		data() {
			return {
			  collectionList: [],
			   params: {
				 pageSize: 8,
				 pageNum: 1,
				 userId: ''
				  },
				show: false,
				id: ''
			}
		},
		onLoad() {
			this.params.userId = this.$store.state.userinfo.userId
			uni.setNavigationBarTitle({
				title: '收藏'
			})	
		},
		mounted() {
		this.getCollection()
		},
		onReachBottom() {
			if (this.total >= (this.params.pageNum *this.params.pageSize)) {
				 this.getMore()
			} else {
				this.$refs.uToast.show({
					position: 'top',
					title: '没有更多数据了'
				})
			}
		},
		methods: {
		  // 获取用户收藏景点
		  async getCollection () {
			  const res = await collectgetscenic(this.params)
			  this.collectionList = res.data.data.data || []
			  this.total = res.data.data.total
			  
		  },
		  // 获取更多
		  async getMore () {
			  this.params.pageNum ++
			  const res = await collectgetscenic(this.params) 
			  this.collectionList = [...res.data.data.data, ...this.collectionList]
		  },
		  // 跳转到景点详情
		  navScennic (id, title) {
			  uni.navigateTo({
			  	url: `../scenic_details/scenic_details?id=${id}&title=${title}`,
			  })
		  },
		  // 弹出层
		  showModel (id) {
		  	this.show = true
		  	this.id = id
		  },
		  // 取消关注
		  async deleteCollection (id){
			  const params = {
			  	userId: this.$store.state.userinfo.userId,
			  	scenicId: this.id,
			  }
			  await collectdeletescenic(params)
			  this.getCollection()
			  this.$store.dispatch('getUserInfo')
			}
		}
	}
</script>

<style lang="less" >
	.btn {
		width: 90rpx !important;
		font-size: 24rpx !important;
	}
</style>
